<script setup>
import {
  SearchOutlined,
  DeleteOutlined,
  ExclamationCircleFilled,
  SmileOutlined,
  ClockCircleOutlined,
  InteractionOutlined,
  ProjectOutlined,
  SnippetsOutlined
} from '@ant-design/icons-vue'
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { h } from 'vue'
import EditTraining from '../EditTraining/index.vue'
import {
  getTrainingListService,
  updateTrainingService
} from '@/api/training.js'

const columns = [
  {
    title: '培训标题',
    dataIndex: 'title',
    key: 'title',
    align: 'center'
  },
  {
    title: '发布时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'center'
  },
  {
    title: '活动简述',
    dataIndex: 'description',
    key: 'description',
    align: 'center'
  },
  {
    title: '标签',
    key: 'tag',
    dataIndex: 'tag',
    align: 'center'
  },
  {
    title: '操作',
    key: 'action',
    align: 'center'
  }
]

const parameterModel = ref({
  title: '',
  activeStatus: '',
  deleted: '',
  pageNo: 1,
  pageSize: 10
})
const formModel = ref([])
const loading = ref(false)
const total = ref(0)
//获取培训列表
const getTrainingList = async () => {
  loading.value = true
  const res = await getTrainingListService(parameterModel.value)
  if (res.data.code === 1) {
    formModel.value = res.data.data.records
    total.value = res.data.data.pages // 更新总记录数
  }
  formModel.value.forEach((item) => {
    item.key = item.id
    //把tag字符串转换成数组
    item.tag = item.tag.split(/,|，|\s+/)
  })
  loading.value = false
}
getTrainingList()

const trainingData = ref()
const editRef = ref()
const onEidt = (record) => {
  editRef.value.showModal()
  trainingData.value = record
}
// 自定义图标为红色
const customIcon = h(ExclamationCircleFilled, { style: { color: 'red' } })

const deleteActivity = async (id) => {
  // 执行删除逻辑
  const res = await updateTrainingService({
    id,
    deleted: 1
  })
  if (res.data.code === 1) {
    message.success('培训活动删除待完成')
    getTrainingList()
  }
}

const cancelDelete = () => {
  message.info('取消删除操作')
}
const handlePageChange = (page) => {
  parameterModel.value.pageNo = page
  getTrainingList()
}
const onSearch = () => {
  getTrainingList()
}
</script>
<template>
  <a-input-search v-model:value="parameterModel.title" placeholder="请输入培训活动名称" style="width: 400px; margin-right: 18px"
    enter-button @search="onSearch" />
  <br />
  <br />
  <a-table :columns="columns" :data-source="formModel" :loading="loading" :pagination="false">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'title'">
        <span>
          <smile-outlined />
          活动名称
        </span>
      </template>
      <template v-if="column.key === 'createTime'">
        <span>
          <ClockCircleOutlined />
          发布时间
        </span>
      </template>
      <template v-if="column.key === 'description'">
        <span>
          <ProjectOutlined />
          活动简述
        </span>
      </template>
      <template v-if="column.key === 'tag'">
        <span>
          <SnippetsOutlined />
          标签
        </span>
      </template>
      <template v-if="column.key === 'action'">
        <span>
          <InteractionOutlined />
          操作
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'title'">
        <a>
          {{ record.title }}
        </a>
      </template>
      <template v-else-if="column.key === 'tag'">
        <span>
          <a-tag v-for="tag in record.tag" :key="tag" :color="tag.length < 3 ? 'green' : 'geekblue'">
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
      </template>
      <template v-else-if="column.key === 'action'">
        <span>
          <a-button type="primary" @click="onEidt(record)">
            <template #icon>
              <SearchOutlined />
            </template>
            查看详情
          </a-button>
          <a-divider type="vertical" />
          <a-popconfirm :icon="customIcon" title="确定要删除这个培训活动吗？" okText="确认" cancelText="取消"
            @confirm="deleteActivity(record.id)" @cancel="cancelDelete">
            <a-button type="primary" danger>
              <template #icon>
                <DeleteOutlined />
              </template>
              删除培训
            </a-button>
          </a-popconfirm>
        </span>
      </template>
    </template>
  </a-table>
  <br />
  <a-pagination :current="parameterModel.pageNo" :page-size="parameterModel.pageSize" :total="total"
    @change="handlePageChange" show-less-items style="float: right" />
  <edit-training ref="editRef" :trainingData="trainingData" :getTrainingList="getTrainingList"></edit-training>
</template>
